<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page isELIgnored="false" %>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>银行绑卡页面</title>
		<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
		<%-- 静态包含 base标签、css样式、jQuery文件 --%>
	<%--	<%@ include file="/pages/common/head.jsp"%>--%>
		<style>
			body {
				overflow: hidden;
			}

			* {
				margin: 0;
				font-family:"Microsoft Yahei";
				color: #666;
			}

			div{
				margin: auto;
				margin-bottom: 10px;
				margin-top: 10px;

			}

			#header {
				height: 82px;
				width: 1200px;
			}

			#main {
				height: 460px;
				width: 1200px;
				border: 1px black solid;
				overflow: auto;
			}

			#bottom {
				height: 30px;
				width: 1200px;
				text-align: center;
			}

			#book{
				width: 100%;
				height: 90%;
				margin: auto;

			}

			.b_list{
				height:300px;
				width:250px;
				margin: 20px;
				float: left;
				margin-top:0px;
				margin-bottom:0px;
				border: 1px #e3e3e3 solid;
			}

			#page_nav{
				width: 100%;
				height: 10px;
				margin: auto;

				text-align: center;
			}

			#pn_input {
				width: 30px;
				text-align: center;
			}

			.img_div{
				height: 150px;
				text-align: center;
			}

			.book_img {
				height:150px;
				width:150px;
			}

			.book_info {

				text-align: center;
			}

			.book_info div{
				height: 10px;
				width: 300px;
				text-align: left;
			}

			.wel_word{
				font-size: 60px;
				float: left;
			}

			.logo_img{
				float: left;
			}

			#header div a {
				text-decoration: none;
				font-size: 20px;
			}

			#header div{
				float: right;
				margin-top: 55px;
			}

			.book_cond{
				margin-left: 500px;
			}

			.book_cond input{
				width: 50px;
				text-align: center;
			}


			/*登录页面CSS样式  */

			#login_header{
				height: 82px;
				width: 1200px;
			}

			.login_banner{
				height:475px;
				background-color: #39987c;
			}

			.login_form{
				height:310px;
				width:406px;
				float: right;
				margin-right:50px;
				margin-top: 50px;
				background-color: #fff;
			}

			#content {
				height: 475px;
				width: 1200px;
			}

			.login_box{
				margin: 20px;
				height: 260px;
				width: 366px;
			}

			h1 {
				font-size: 20px;
			}
			.msg_cont{
				background: none repeat scroll 0 0 #fff6d2;
				border: 1px solid #ffe57d;
				color: #666;
				height: 18px;
				line-height: 18px;
				padding: 3px 10px 3px 40px;
				position: relative;
				border: none;
			}


			.form .itxt {
				border: 0 none;
				float: none;
				font-family: "宋体";
				font-size: 14px;
				height: 18px;
				line-height: 18px;
				overflow: hidden;
				padding: 10px 0 10px 10px;
				width: 220px;
				border: 1px #e3e3e3 solid;
			}

			#sub_btn{
				background-color: #39987c;
				border: none;
				color: #fff;
				width: 360px;
				height: 40px;
			}

			#l_content {
				float: left;
				margin-top: 150px;
				margin-left: 300px;
			}

			#l_content span {
				font-size: 60px;
				color: white;
			}

			.tit h1 {
				float: left;
				margin-top: 5px;
			}

			.tit a {
				float: right;
				margin-left: 10px;
				margin-top: 10px;
				color: red;
				text-decoration: none;
			}

			.tit .errorMsg {
				float: right;
				margin-left: 10px;
				margin-top: 10px;
				color: red;
			}

			.tit {
				height: 30px;
			}
			/*购物车*/
			#main table{
				margin: auto;
				margin-top: 80px;
				border-collapse: collapse;
			}

			#main table td{
				width: 120px;
				text-align:center;
				border-bottom: 1px #e3e3e3 solid;
				padding: 10px;
			}

			.cart_info{
				width: 700px;
				text-align: right;
			}

			.cart_span {
				margin-left: 20px;
			}

			.cart_span span{
				color: red;
				font-size: 20px;
				margin: 10px;
			}

			.cart_span a , td a{
				font-size: 20px;
				color: blue;
			}

			#header div span {
				margin: 10px;
			}

			#header div .um_span{
				color: red;
				font-size: 25px;
				margin: 10px;
			}

			#header div a {
				color: blue;
			}

		</style>

		<script type="text/javascript">
			// 页面加载完成之后
			$(function () {
				// 给注册绑定单击事件
				$("#sub_btn").click(function () {
					// 验证用户名：必须由字母，数字下划线组成，并且长度为5到12位
					//1 获取用户名输入框里的内容
					var nameText = $("#name").val();
					//2 创建正则表达式对象
					var namePatt = /^(([a-zA-Z+\.?\·?a-zA-Z+]{2,30}$)|([\u4e00-\u9fa5+\·?\u4e00-\u9fa5+]{2,30}$))/;
					//3 使用test方法验证
					if (!namePatt.test(nameText)) {
						//4 提示用户结果
						$("span.errorMsg").text("姓名不合法！");
						return false;
					}

					//1 获取身份证输入框里的内容
					var idcodeText = $("#idcode").val();
					//2 创建正则表达式对象
					//var idcodePatt=/^[0-9]*$/;

					var idcodePatt =/^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;
					//3 使用test方法验证
					if (!idcodePatt.test(idcodeText)) {
						//4 提示用户结果
						$("span.errorMsg").text("身份证不合法！");

						return false;
					}

					// 验证银行卡号：
					//1 获取银行卡号输入框里的内容
					var cardnumberText = $("#cardnumber").val();
					//2 创建正则表达式对象
					var cardnumberPatt = /^[0-9]*$/;
					//var cardnumberPatt = /^([1-9]{1})(\d{15}|\d{16}|\d{18})$/;
					//3 使用test方法验证
					if (!cardnumberPatt.test(cardnumberText)) {
						//4 提示用户结果
						$("span.errorMsg").text("银行卡号不合法！");

						return false;
					}
					// 验证手机号：
					//1 获取手机号输入框里的内容
					var phoneText = $("#phone").val();
					//2 创建正则表达式对象
					var phonePatt = /^1[3-9]\d{9}$/;
					//3 使用test方法验证
					if (!phonePatt.test(phoneText)) {
						//4 提示用户结果
						$("span.errorMsg").text("手机号不合法！");

						return false;
					}



					// 验证支付密码：六位数字
					//1 获取支付密码输入框里的内容
					var paypasswordText = $("#paypassword").val();
					//2 创建正则表达式对象
					var paypasswordPatt = /^\d{6}$/;
					//3 使用test方法验证
					if (!paypasswordPatt.test(paypasswordText)) {
						//4 提示用户结果
						$("span.errorMsg").text("支付密码不合法！");

						return false;
					}

// 验证码：现在只需要验证用户已输入。因为还没讲到服务器。验证码生成。
					var codeText = $("#code").val();

					//去掉验证码前后空格
					// alert("去空格前：["+codeText+"]")
					codeText = $.trim(codeText);
					// alert("去空格后：["+codeText+"]")

					if (codeText == null || codeText == "") {
						//4 提示用户
						$("span.errorMsg").text("验证码不能为空！");

					}

					// 去掉错误信息
					$("span.errorMsg").text("");

				});
				$("#code_img").click(function(){
					this.src = "/kaptcha.jpg?d="+ new Date();
				})


            });

		</script>
	<style type="text/css">
		.login_form{
			height:420px;
			margin-top: 5px;
		}
		#content{
			position: relative;
			right: 400px;
			top:5px;
		}

	</style>
	</head>
	<body>
		<div id="login_header">
			<img class="logo_img" style="width: 300px; height:82px" alt="" src="/static/img/bank.jpg" >
		</div>

			<div class="login_banner">


				<div id="content">
					<div class="login_form">
						<div class="login_box">
							<div class="tit">
								<h1>绑定银行卡</h1>
								<span class="errorMsg">
									${empty msg? "输入银行卡信息" : msg}
								</span>
							</div>
							<div class="form">
								<form action="/accountServlet" method="post">
									<input type="hidden" name="action" value="tiedCard">
									<label>持卡用户：</label>
									<input class="itxt" type="text" placeholder="请输入您的姓名"
										   value="${requestScope.name}"
										   autocomplete="off" tabindex="1" name="name" id="name" />
									<br />
									<br />
									<label>身份证号：</label>
									<input class="itxt" type="text" placeholder="请输入您的身份证号"
										   value="${requestScope.idcode}"
										   autocomplete="off" tabindex="1" name="idcode" id="idcode" />
									<br />
									<br />
									<label>银行卡号：</label>
									<input class="itxt" type="text" placeholder="请输入您的银行卡号"
										   value="${requestScope.cardnumber}"
										   autocomplete="off" tabindex="1" name="cardnumber" id="cardnumber" />
									<br />
									<br />
									<label>预留号码：</label>
									<input class="itxt" type="text" placeholder="请输入您的银行预留手机号"
										   value="${requestScope.phone}"
										   autocomplete="off" tabindex="1" name="phone" id="phone" />
									<br />
									<br />
									<label>开户银行：</label>
									<input class="itxt" type="text" placeholder="请输入开户银行"
										   value="${requestScope.bank_name}"
										   autocomplete="off" tabindex="1" name="bank_name" id="bank_name" />
									<br />
									<br />
									<label>支付密码：</label>
									<input class="itxt" type="password" placeholder="请输入支付密码"
										   autocomplete="off" tabindex="1" name="paypassword" id="paypassword" />
									<br />
									<br />
									<label>验证码：</label>
									<input class="itxt" type="text" name="code" style="width: 150px;" id="code" />
									<img id="code_img" alt="" src="kaptcha.jpg" style="float: right; margin-right: 40px;width: 90px;height: 40px;">
									<br />
									<br />
									<input type="submit" value="绑卡" id="sub_btn" />
								</form>
							</div>

						</div>
					</div>
				</div>
			</div>

		<%--静态包含页脚内容--%>


	</body>
</html>